<script setup>
import { Fold,} from '@element-plus/icons-vue'
import router from '@/router'
import { ElMessage } from 'element-plus';
const props = defineProps(['navigationStore','user'])
const logout = ()=>{
    localStorage.removeItem('userInfo')
    localStorage.removeItem('userRouter')
    localStorage.removeItem('echartsStore')
    router.push('/login')
    ElMessage.success('退出成功')
}
</script>
<template>
    <div class="toolbar" style="display: flex;">
        <div style="margin-right: 88%; font-size: 25px;" @click="props.navigationStore.collapse()">
            <el-icon style="margin-top: 15px;">
                <component class="fold-menu" :is="Fold"></component>
            </el-icon>
        </div>
        <div>
            <div style="width: 80px;text-align:center;line-height: 60px;margin-right: 5px;">
                <strong>{{ props.user.nickname }}</strong>
            </div>

        </div>
        <div style="margin-right: 14px;margin-top: 16px;">
            <el-dropdown trigger="click">
                <el-icon style="font-size: 20px;">
                    <img :src="user.avatarUrl" alt=""
                    style="width: 40px; border-radius: 50%;">
                </el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="$router.push('/person')">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="logout()">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<style></style>